<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-03-16 11:32:16
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-03-21 13:23:15
-->
<template>
  <div>
    <el-dialog
      title="考试"
      :visible.sync="dialog.newPriceShow"
      width="50%"
      @close="priceClose"
    >
      <el-form
        :model="priceForm"
        ref="priceForm"
        :rules="priceRules"
        label-position="top"
        :inline="false"
        size="normal"
        v-if="dialog.newPriceShowEject"
      >
        <el-form-item label="考试名称" prop="examName" style="width: 330px">
          <el-input
            v-model="priceForm.examName"
            placeholder="请输入考试名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="价格(元)" prop="price" style="width: 330px">
          <el-input v-model="priceForm.price" 请输入价格></el-input>
        </el-form-item>
        <el-form-item label="适用地点" prop="areaId">
          <el-cascader
            clearable
            v-model="priceForm.areaId"
            :options="areaList"
            :props="defaultParams"
            placeholder="请选择所在地"
            style="width: 330px"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="适用时间" prop="dates" style="width: 330px">
          <el-date-picker
            v-model="priceForm.dates"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 330px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" size="normal">
          <el-input
            type="textarea"
            rows="4"
            v-model="priceForm.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="dialog.newPriceShow = false">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button type="primary" @click="onSubmit">直接上架</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updatePrice } from "@/api/school/price";
import { getArea } from "@/api/signUp";
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      defaultParams: {
        label: "name",
        value: "id",
        children: "children",
        expandTrigger: "hover",
      },
      priceRules: {
        examName: [
          {
            required: true,
            message: "请输入考试名称",
            trigger: "blur",
          },
        ],
        price: [
          {
            required: true,
            message: "请输入考试名称",
            trigger: "blur",
          },
        ],
        areaId: [
          {
            required: true,
            message: "请输入考试名称",
            trigger: "blur",
          },
        ],
        dates: [
          {
            required: true,
            message: "请输入考试名称",
            trigger: "change",
          },
        ],
      },
      // 区域
      areaList: [],
      priceForm: {
        examName: "",
        price: "",
        areaId: "",
        dates: "",
        remark: "",
        status: 2,
      },
    };
  },
  created() {
    this.getAreaList();
  },
  methods: {
    // 获取所有地区
    getAreaList() {
      getArea().then((res) => {
        let data = res.data;
        this.areaList = this.getTreeData(data);
      });
    },
    // 处理地区数据
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    priceClose() {
      this.dialog.newPriceShowEject = false;
      this.priceForm = {
        examName: "",
        price: "",
        areaId: "",
        dates: "",
        remark: "",
        status: 2,
      };
    },
    submit() {
      this.priceForm.status = 2;
      updatePrice(this.priceForm).then((res) => {
        this.$message.success(res.msg);
        this.dialog.newPriceShow = false;
        this.$parent.getList();
      });
    },
    onSubmit() {
      this.priceForm.status = 1;
      updatePrice(this.priceForm).then((res) => {
        this.$message.success(res.msg);
        this.dialog.newPriceShow = false;

        this.$parent.getList();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .el-form-item {
    width: 40%;
  }
  .el-form-item:nth-child(5) {
    width: 90%;
  }
}
</style>